<template>
	<view class="">
		<uni-nav-bar fixed="true" :border="false">
			<view class="slot-wrap d-flex align-center">
				<view class="d-flex align-center search-box">
					<view class="search-input-box u-flex align-center">
						<view class="img-box">
							<image style="width: 50rpx; height: 50rpx;" src="../../static/indexImages/searchicon.png" mode=""></image>
						</view>
						<view class="flex_alitm">
							<input v-model="keyword" type="text" style="font-size: 14px;" placeholder="搜你想要的订单">
						</view>
					</view>
				</view>
				<view class="screen-box d-flex align-center justify-space-between ml-4">
					<view class="export screen-item d-flex align-center" @click="handExport">
						<!-- <image style="width: 50rpx; height: 50rpx;" src="../../static/orderImages/export.png" mode=""></image> -->
						<!-- <text class="text">导出</text> -->
					</view>
					<view class="export screen-item d-flex align-center"  @click="handScreen(1)">
						<image style="width: 60rpx; height: 60rpx;" class="shai" src="../../static/orderImages/screen.png" mode=""></image>
					</view>
					<view class="export screen-item d-flex align-center" @click="handScreen(2)">
						<image style="width: 60rpx; height: 60rpx;" class="shai" src="../../static/orderImages/arrow.png" mode=""></image>
					</view>
				</view>
			</view>
		</uni-nav-bar>
		<view class="content">
			<!-- <u-sticky> -->
				<!-- <view class="tab-box mb-2">
				<v-tabs v-model="current" field="name" :fixed="true" :tabs="list" @change="change"></v-tabs>
					<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs> -->
				<!-- </view>	 -->
			<!-- </u-sticky> -->
			<view class="product-box">
				<view class="product-item mb-4" v-for="(item , index) in products" :key="index+'pro'">
					<view class="mb-2 pb-2 order_id_box d-flex align-center justify-space-between">
						<view class="order_id d-flex align-center" @click="handDetails(item.id)">
							<text class="mr-1">订单号：{{item.ordersno}}</text>
							<uni-icons type="right" color="#ABABAB" size="20"></uni-icons>
						</view>
						<view class="status">
							<text>{{item.cash_money}}</text>
						</view>
					</view>
					<!-- <view class=" d-flex mb-2"  v-for="(good , gindex) in item.goods" :key="gindex"> -->
					<view class=" d-flex mb-2"  >
						<view class="product-image-box mr-4">
							<image class="banner" :src="item.main_pic" mode="">
							</image>
						</view>
						<view class="product-conten">
							<view class="d-flex align-center">
								<text class="font-bold font-18 mr-4">{{item.goods_name}}</text>
							</view>
							<view class="mt-2 d-flex align-center">
								<view class="d-flex price align-end">
									<text>¥</text>
									<text class="font-20">{{item.pay_money}}元/</text>
									
									<text  class="font-20">月</text>
								</view>
							</view>
							<view class="flex-column align-center mt-2">
								<view class="mr-2">收件信息：</view>
								<text class="recipient">{{item.pay_name}} &numsp;{{item.pay_phone}}</text>
							</view>
							<!-- <view class="mt-2 wuliubtn" @click="handlogistics(good.goodsid)">物流信息
							<uni-icons type="right" color="#ABABAB" size="20"></uni-icons>
							</view> -->
						</view>
					</view>
					<view class="tc-describe mt-2 pt-2" @click="handPackageDescription(item.id)">
						<view class="d-flex align-center justify-space-between">
							<view class="d-flex align-center ">
								<text class="tc-title mr-1 ml-1">推广人:</text>
								<text class="ellipsis-container recipient(">{{(item.sup_shop_name != 0)?item.sup_shop_name : '本店铺'}}</text>
							</view>
							<view class="">
								<text class="ellipsis-container recipient">{{item.created_at}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<page-empty  con="暂无收益~" v-if="isEmpty(products)"></page-empty>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				emptysrc:'',//要展示的缺省图
				list: [{
					id:1,
					name: '全部',
					disabled: false
				}, {
					id:2,
					name: '待审核',
					disabled: false
				}, {
					id:3,
					name: '未结算',
					disabled: false
				},{
					id:4,
					name: '结算中',
					disabled: false
				}, {
					id:5,
					name: '已结算',
					disabled: false
				}, {
					id:6,
					name: '不结算',
					disabled: false
				}],
				background:{},
				keyword:'',
				current:0,
				customStyle:{},
				serverHost:'',
				goods:[],
				product:[],
				products:[ //产品数据
					{
						id:659599999999,
						image:('../../static/indexImages/customized.png'),
						status:'待处理',
						promoter:'bin890315',
						addtime:'2024-06-05 19:47:13',
						goods:[
							{
								goodsid:'1',
								name:'联通新海卡',
								price:'15',
								unit:'月',
								recipient:'程庆斌 17688338888',
							},
							{
								goodsid:'2',
								name:'联通新海卡',
								price:'15',
								unit:'月',
								recipient:'程庆斌 17688338888',
							},
						]
					},
					{
						id:659599999999,
						image:('../../static/indexImages/customized.png'),
						status:'待收货',
						promoter:'bin890315',
						addtime:'2024-06-05 19:47:13',
						goods:[
							{
								goodsid:'1',
								name:'联通新海卡',
								price:'15',
								unit:'月',
								recipient:'程庆斌 17688338888',
							},
						]
					},
					{
						id:659599999999,
						image:('../../static/indexImages/customized.png'),
						status:'待处理',
						promoter:'bin890315',
						addtime:'2024-06-05 19:47:13',
						goods:[
							{
								goodsid:'1',
								name:'联通新海卡',
								price:'15',
								unit:'月',
								recipient:'程庆斌 17688338888',
							},
						]
					},
				],
			}
		},
		onLoad() {
			this.serverHost = uni.$my.serverHost;
			this.init();
		},
		onShow() {
			let nowApp = getApp();
			// console.log(nowApp)
			if (true === uni.$uv.getProperty(nowApp, 'globalData.reInit')) {
				getApp().globalData.reInit = false;
				console.log('重新执行init');
				this.init();
			}
		},
		methods:{
			isEmpty(item) {
				return uni.$uv.test.empty(item)
			},
			// 导出
			handExport(){
				uni.showToast({
					title:'导出'
				})
			},
			// 筛选
			handScreen(index){
				uni.showToast({
					title:'筛选'+index
				})
			},
			// 点击订单id，进入详情
			handDetails(id){
				uni.showToast({
					title:'进入详情'
				})
			},
			// tab切换
			change(index) {
				// console.log(index,1111111111);
				this.current = index;
				if(index == 1){
					this.products = this.makeGoods(this.goods,1,1);
				}else if(index == 2){
					this.products = this.makeGoods(this.goods,2,2);
				}else if(index == 3){
					this.products = this.makeGoods(this.goods,3,3);
				}else if(index == 4){
					this.products = this.makeGoods(this.goods,4,4);
				}else if(index == 5){
					this.products = this.makeGoods(this.goods,10,10);
				}else{
					this.products = this.makeGoods(this.goods,0,100);
				}
				// console.log(this.products,333333333);
				
			},
			// 物流信息
			handlogistics(id){
				uni.showToast({
					title:'物流信息'
				})
			},
			init(){
				uni.$uv.http.post('/cash/index').then(res => {
					// this.products = this.makeServerPicUrl(res.data || '', 'main_pic');
					this.goods = this.makeServerPicUrl(res.data,'main_pic');
					this.products = this.goods;
					// this.gridList = this.makeServerPicUrl(res.data.grid || '', 'pic')
					// this.swiperList = this.makeServerPicUrl(res.data.swiper || '', 'pic')
					// this.adList = this.makeServerPicUrl(res.data.ad || '', 'pic')
					// this.tabList = res.data.tab || []
					// this.popAd = this.makeServerPicUrl(res.data.pop || '', 'pic')
					// if (!this.isEmpty(this.popAd) && !this.isReInit) {
					// 	this.openPopAd()
					// }
					// if (!this.isEmpty(this.tabList)) {
					// 	this.getTabData()
					// }
					// console.log(res)
				}).catch(e => {
					console.log(e)
				})
			},
			makeServerPicUrl(rowsArray, picField) {
				if (!this.isEmpty(rowsArray)) {
					// console.log(1111111);
					if (uni.$uv.test.array(rowsArray)) {
						for (let i = 0; i < rowsArray.length; i++) {
							// console.log(this.serverHost,2222222222);
							rowsArray[i][picField] = this.serverHost + rowsArray[i][picField]
						}
					} else if (uni.$uv.test.object(rowsArray)) {
						// console.log(this.serverHost,333333333333333);
						rowsArray[picField] = this.serverHost + rowsArray[picField]
					}
				}
				return rowsArray
			},
			makeGoods(row,one,two){
				let array = [];
				let j=0;
				if(!this.isEmpty(row)){
					for(let i =0;i< row.length;i++){
						if(row[i].cash_status >= one && row[i].cash_status <= two){
							array[j] = row[i];
							j++;
						}
					}
				}
				return array;
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{	
		padding-bottom: 100rpx;
	}
	.slot-wrap{
		padding: 10rpx 0rpx;
		width: 100%;
	}
	.search-box{
		background-color: #F2F2F3;
		border-radius: 36rpx;
		height: 72rpx;
		width: 320rpx;
		padding: 0 0 0 12rpx;
		.search-input-box{
			input{
				width: 260rpx;
			}
			.image100 , .img-box{
				width: 50rpx !important;
				height: 50rpx !important;
			}
		}
		
		.tab-box{
			width: 100%;
			height: 100rpx;
			background-color: #fff;
		}
	}
	.screen-box{
		width: 300rpx;
		.screen-item{
			.text{
				color: #1456FE;
			}
			image{
				width: 40rpx;
				height: 40rpx;
			}
			.shai{
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
	.product-box{
		padding: 20rpx;
	}
	.product-item{
		
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		
		.product-image-box{
			width: 260rpx;
			height: 260rpx;
			position: relative;
			.banner{
				width: 100%;
				height:100%;
			}
			.ranking{
				width: 140rpx;
				height: 80rpx;
				position: absolute;
				left: -8rpx;
				top: 0;
			}
		}
		.product-conten{
			.wuliubtn{
				width: 200rpx;
				border-radius: 72rpx;
				text-align: center;
				display: flex;
				padding: 12rpx 22rpx;
				align-items: center;
				border: 1px solid #ABABAB;
			}
			.copy{
				background-color: $uni-color-primary;
				padding: 8rpx;
				border-radius: 6rpx;
				color: #fff;
				
				image{
					width: 24rpx;
					height: 24rpx;
				}
				.copyimage{
					width: 32rpx;
					height: 32rpx;
				}
			}
			.flow{
				.Verticalline{
					width: 0px;
					height: 24rpx;
					border: 1px solid #ABABAB;
				}
			}
			.describe{
				color: #5D5D5D;
			}
			.price{
				color: #FF600F;
			}
		}
		.recipient{
			color: #5D5D5D;
		}
		.order_id_box{
			border-bottom: 1px solid rgba(0,0,0,0.16);
			.status{
				color: #f00;
			}
		}
		.tc-describe{
			border-top: 1px solid rgba(0,0,0,0.1);
		}
	}
	::v-deep .uni-navbar__header-btns-right{
		display: none;
	}
	::v-deep .uni-navbar__header-btns-left{
		display: none;
	}
	::v-deep .uni-navbar__header-container{
		align-items: center;
		justify-content: space-between;
	}
</style>